<template>
  <div class="top-toolbar">
    <el-tooltip
      v-for="(item, index) in buttons"
      :key="index"
      :content="item.tooltip"
      placement="bottom"
    >
      <el-button :icon="item.icon" circle plain class="toolbar-btn" @click="item.handler" />
    </el-tooltip>
  </div>
</template>

<script setup lang="ts">
import { Refresh, Plus, Search, Download, Upload, Setting } from '@element-plus/icons-vue'

// 按钮数据
const buttons = [
  { icon: Refresh, tooltip: '刷新', handler: () => console.log('刷新') },
  { icon: Plus, tooltip: '新建', handler: () => console.log('新建') },
  { icon: Search, tooltip: '搜索', handler: () => console.log('搜索') },
  { icon: Download, tooltip: '下载', handler: () => console.log('下载') },
  { icon: Upload, tooltip: '上传', handler: () => console.log('上传') },
  { icon: Setting, tooltip: '设置', handler: () => console.log('设置') },
]
</script>

<style scoped>
.top-toolbar {
  display: flex;
  margin-left: auto;
  gap: 8px;
}

.toolbar-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  border-color: #dcdfe6;
  transition: all 0.2s;
}

.toolbar-btn:hover {
  background-color: #ecf5ff;
  border-color: #409eff;
  transform: translateY(-1px);
}
</style>
